<template>
  <div class="homePanel">
    <ul>
      <li class="itemStyle" v-for="el in list">{{ el.id }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import eventBus from "../../server/eventBus";
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  private list: any = [];
  public login(data: object) {
    this.list.push(data);
  }
  public disconnect(data: object) {
    console.log("data");
    for (let i = 0; i < this.list.length; i++) {
      console.log("this.list[i][] == data.id:", this.list[i]["id"], data.id);
      if (this.list[i]["id"] == data.id) this.list.splice(i, 1);
    }
  }
  mounted() {
    eventBus.$on("login", this.login);
    eventBus.$on("disconnect", this.disconnect);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.homePanel {
  width: 100%;
  height: 100%;
  .itemStyle {
    height: 50px;
    line-height: 50px;
    text-align: left;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: 1px solid #ccc;
  }
}
</style>
